import React, { Component } from 'react';
import './News_list.css';
import { Select, Button, message } from 'antd';
import { number, string } from 'prop-types';

const { Option } = Select;

export default class Regis_ques extends Component{
  constructor(props){
    super(props);
    this.state = {
      originValue: '',
      handleProvince: '',
      cementValue: '',
      versionValue: '',
    }
  }

  handleOrigin = (value) => {
    this.setState({
      originValue: value
    })
  }
  handleProvince = (value) => {
    this.setState({
      provinceValue: value
    })
  }
  handleCement = (value) => {
    this.setState({
      cementValue: value
    })
  }
  handleVersion = (value) => {
    this.setState({
      versionValue: value
    })
  }
  handleBtn = () => {
    if(typeof this.state.originValue !='undefined' && typeof this.state.provinceValue !='undefined' && typeof this.state.cementValue != 'undefined' && typeof this.state.versionValue !='undefined' ){
      message.info("创建成功！！！！")
    }
    else{
      message.info("请选择所有的信息，再提交！！")
    }
  }
	
	render(){
		return(
			<div id="news_list">
        <div className="col-md-12 col-sm-12">
          <h2 >登记模板</h2>
          <h4 >您可以登记已经发放问卷的工厂信息。</h4>
          <h3 style={{"font-weight": 'bold'}}>登记已发问卷厂家</h3>
          <form role="form" className="form" style = {{marginLeft: '30%'}} >
            <div >
              <label style = {{width:'100px',float:'left',textAlign:'right'}}>区域：</label>
              <Select
                showSearch
                style={{ width: 300 }}
                placeholder="请选择区域"
                optionFilterProp="children"
                value = {this.state.originValue}
                onChange={this.handleOrigin}
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                <Option value="0">华北地区京津冀蒙晋</Option>
                <Option value="1">东北地区黑吉辽</Option>
                <Option value="2">华东地区沪皖闽苏赣鲁浙</Option>
                <Option value="3">西北地区陇宁青陕新</Option>
                <Option value="4">西南地区渝川黔藏云</Option>
                <Option value="5">中南地区粤桂琼豫鄂湘</Option>
                <Option value="6"></Option>
              </Select>,
            </div>
            <div className="form_style row">
              <label style = {{width:'100px',float:'left',textAlign:'right'}}>省份：</label>
              <Select
                showSearch
                style={{ width: 300 }}
                placeholder="请选择省份"
                optionFilterProp="children"
                value = {this.state.provinceValue}
                onChange={this.handleProvince}
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                <Option value="0">北京</Option>
                <Option value="1">天津</Option>
                <Option value="2">河北</Option>
                <Option value="3">山西</Option>
                <Option value="4">内蒙古</Option>
                <Option value="5">辽宁</Option>
                <Option value="6">吉林</Option>
                <Option value="7">黑龙江</Option>
                <Option value="8">上海</Option>
                <Option value="9">江苏</Option>
                <Option value="10">浙江</Option>
                <Option value="11">安徽</Option>
                <Option value="12">福建</Option>
                <Option value="13">江西</Option>
                <Option value="14">山东</Option>
                <Option value="15">河南</Option>
                <Option value="16">湖北</Option>
                <Option value="17">湖南</Option>
                <Option value="18">广东</Option>
                <Option value="19">广西</Option>
                <Option value="20">海南</Option>
                <Option value="21">重庆</Option>
                <Option value="22">四川</Option>
                <Option value="23">贵州</Option>
                <Option value="24">云南</Option>
                <Option value="25">西藏</Option>
                <Option value="26">陕西</Option>
                <Option value="27">甘肃</Option>
                <Option value="28">青海</Option>
                <Option value="29">宁夏</Option>
                <Option value="30">新疆</Option>
                <Option value="31">香港</Option>
                <Option value="32">澳门</Option>
              </Select>
            </div>
            <div>
              <label style = {{width:'100px',float:'left',textAlign:'right'}}>水泥厂：</label>
              <Select
                showSearch
                style={{ width: 300 }}
                placeholder="请选择水泥厂"
                optionFilterProp="children"
                value = {this.state.cementValue}
                onChange={this.handleCement}
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                <Option value="0">临城水泥厂</Option>
                <Option value="1">天门水泥厂</Option>
              </Select>
            </div>
            <div className="form_style row">
              <label style = {{width:'100px',float:'left',textAlign:'right'}}>问卷版本：</label>
              <Select
                  showSearch
                  style={{ width: 300 }}
                  placeholder="请选择问卷版本"
                  optionFilterProp="children"
                  onChange={this.handleVersion}
                  value = {this.state.versionValue}
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  <Option value="0">2018水泥模板</Option>
                </Select>
            </div>
            <Button style = {{marginLeft:'25%'}} type = 'primary' onClick = {this.handleBtn} >提交</Button>
          </form>
        </div>
      </div>
		)
	}
}